
---
comments: false
---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../poem/leancloud.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
    <link rel="stylesheet" href="../poem/loading.css">
    <link rel="stylesheet" href="../poem/leancloud.css">

</head>
<style>
    .social-media-post {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      cursor: pointer;
      
    }
    .profile {
      display: flex;
      align-items: center;
    }
    
    .avatar {
      width: 50px; /* Adjust size as needed */
      height: 50px; /* Adjust size as needed */
      border-radius: 50%;
      display: block;
      /* margin-right: 10px; */
    }
  
    #avatar img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover; 
    }
    .user-info {
      display: flex;
      flex-direction: column;
      padding: 10px;
    }
  
    .username {
      font-weight: bold;
    }
  
    .timestamp {
      font-size: 0.8em;
      color: #777;
    }
  
    .post-text {
      margin-top: 10px;
    }
  
    .imgContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .imgContainer img {
        width: 100px; 
        height: 100px;
        padding: 5px;
        object-fit: cover; 
        overflow: hidden;
        border-radius: 10px;
        transition: transform 0.5s;
    }
    img:hover {
        transform: scale(1.05);
        
    }
       
  </style>
<body>

    <div id="container">
    </div>
    <div id="buttonContainer">
        <div id="moreButton"></div>
    </div>

  <script>

    var elements = document.querySelector('.post-title__text');
    elements.textContent = '发现'

    var currentPage = 1;
    var pageSize = 10; // 每页显示的条目数
    initLeanCloud()
    requestDiscovery(currentPage,pageSize,handleData)
    var img = document.getElementById('moreButton');
    img.addEventListener('click', function() {
      currentPage++;
      requestData(currentPage,pageSize,handleData)
    });
    var container = document.getElementById("container");
    function handleData(data) {
      console.log('获取到的数据为：',data);
      if (data.length < 10) {
        img.style.display = 'none';
      }
      data.forEach(function(object) {
            
            console.log(object.get('userAvatar'));
            console.log(object.get('userName'));

            var avararData = object.get('userAvatar');
            var userNameData = object.get('userName');
            var contentData = object.get('content');
            var imgData = object.get('img');
            var dateData = object.get('createdAt');//.toISOString();
            var objectId = object.get('objectId');
            

            var newDiv = document.createElement("div");
            newDiv.classList.add("social-media-post");
            container.appendChild(newDiv);

            var profile = document.createElement("div");
            profile.classList.add("profile");
            newDiv.appendChild(profile);

            var avatarDiv = document.createElement("div");
            // avatarDiv.classList.add("avatar");
            avatarDiv.setAttribute('id', 'avatar');
            profile.appendChild(avatarDiv);

            var avatar = document.createElement("img");
            // avatar.classList.add("avatar");
            avatar.src = avararData;
            avatarDiv.appendChild(avatar);

            var userInfo = document.createElement('div')
            userInfo.classList.add("user-info");
            profile.appendChild(userInfo);

            var name = document.createElement("span");
            name.classList.add("username");
            name.innerHTML = userNameData;
            userInfo.appendChild(name);

            var date = document.createElement("span");
            date.classList.add("timestamp");
            date.innerHTML = timeSince(dateData);
            userInfo.appendChild(date);

            var content = document.createElement("p");
            content.classList.add("post-text");
            content.innerHTML = contentData;
            newDiv.appendChild(content);

            var imgContainer = document.createElement("div");
            imgContainer.classList.add("imgContainer");
            newDiv.appendChild(imgContainer);

            var imgArr = imgData.split('、');
            imgArr.forEach(function(img) {
                var newImg = document.createElement("img");
                var decodedUrl = decodeURIComponent(img);
                newImg.src = decodedUrl;
                newImg.classList.add("post-image");
                newImg.style.borderRadius = "10px";
                imgContainer.appendChild(newImg);
            })

            newDiv.addEventListener('click', function() {

                localStorage.setItem('post_imgArr', imgData);
                localStorage.setItem('objectId', objectId);
                localStorage.setItem('post_avatar', avararData);
                localStorage.setItem('post_username', userNameData);
                localStorage.setItem('post_content', contentData);
                localStorage.setItem('post_date', timeSince(dateData));
                
                
                // 跳转到详情页
                window.location.href = 'postDetail.html';
            });
        });

      // 在这里处理获取到的数据，例如更新页面内容等
    //   var data = document.querySelector('.data');
      var loading = document.querySelector('.loading');
      loading.style.display = 'none'; // 隐藏loading动画
    //   data.style.opacity = 0.8; // 显示数据
    }

  </script>

</body>
</html>
